import { Button, Form, FormProps, Input, message, Space } from "antd";
import { register, send_email, UserProps } from "../../api/flask";
import useRouter from "../../hooks/useRouter";

type FieldType = UserProps

const Index = () => {
  const [form] = Form.useForm<FieldType>();
  const { navigate } = useRouter()

  const sendEmail = () => {
    const email = form.getFieldValue('email') as string
    send_email(email).then((res) => {
      console.log(res);
      message.success('验证码发送成功')
    })
  }

  const onFinish: FormProps<FieldType>['onFinish'] = (values) => {
    console.log('Success:', values);
    register(values).then((res) => {
      console.log(res);
      message.success('注册成功')
    })
  };

  const handleToLogin = () => {
    navigate(`/login`)
  }

  return (
    <div>
      <h1>Flask</h1>
      <Space>已有账号，去登录<Button onClick={handleToLogin}>登录</Button></Space>

      <Form
        form={form}
        name="basic"
        labelCol={{ span: 8 }}
        wrapperCol={{ span: 16 }}
        style={{ maxWidth: 600 }}
        initialValues={{ remember: true }}
        onFinish={onFinish}
        autoComplete="off"
      >
        <Form.Item<FieldType>
          label="邮箱"
          name="email"
          required
        >
          <Input />
        </Form.Item>

        <Form.Item<FieldType>
          label="验证码"
          name="captcha"
          required
        >
          <Space.Compact style={{ width: '100%' }}>
            <Input />
            <Button type="primary" onClick={sendEmail}>发送验证码</Button>
          </Space.Compact>
        </Form.Item>

        <Form.Item<FieldType>
          label="Username"
          name="username"
          required
        >
          <Input />
        </Form.Item>

        <Form.Item<FieldType>
          label="Password"
          name="password"
          required
        >
          <Input.Password />
        </Form.Item>

        <Form.Item<FieldType>
          label="Password"
          name="confirm_password"
          required
        >
          <Input.Password />
        </Form.Item>


        <Form.Item label={null}>
          <Button type="primary" htmlType="submit">
            Submit
          </Button>
        </Form.Item>
      </Form>
    </div>
  )
}

export default Index